<template>
    <div class="headerMain">
        <div class="header">
            <div class="mainWidth">
                <div style="display: flex;align-items: center">
                    <img @click="goHome" style="cursor: pointer" src="http://120.77.241.102/portal/500eaf36467d0b121c0c.png" width="15px" height="15px"/>
                    <span class="headerFont" @click="goHome">商城首页</span>
                </div>
                <div class="rightArea" style="display: flex;align-items: center">
                    <span class="headerFont" @click="login" v-if="!userInfo">你好，请登录</span>
                    <span class="headerFont" @click="register" v-if="!userInfo">免费注册</span>
                    <span class="headerFont" v-if="userInfo">欢迎你:{{userInfo}}</span>
                    <span class="headerFont" @click="myOrder">我的订单</span>
                    <span class="headerFont" @click="unLogin">退出登录</span>
                </div>
            </div>
        </div>
        <div class="headerBody">
            <div class="logo">
                <img :src="imageUrl" style="border-radius: 2px;" width="300px" height="80px"/>
            </div>
            <div class="search">
                <input  type="text" v-model="searchText"/>
                <span class="searchButton" @click="search"></span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    /* eslint-disable */
    import { Component, Vue,Emit } from 'vue-property-decorator';
    import PortalApiActions from "@/components/api/portal-api-actions";
    @Component({
        components:{
        }
    })
    export default class Header extends Vue {
        public imageUrl="http://localhost/images/logo.png";
        public searchText:any="";
        public userInfo:any="";
        async created(){
             let userInfo=await PortalApiActions.getUserInfo();
             if(userInfo.data){
                 this.userInfo=userInfo.data.username;
             }

        }
        //跳转到登录页面
        public login(){
            this.$router.push({
                path: '/login',
            });
        }
        @Emit('search')
        public search(){
            return this.searchText;
        }
        //跳转到注册页面
        public register(){
            this.$router.push({
                path: '/register',
            });
        }
        //退出登录
        public async unLogin(){
            let userInfo=await PortalApiActions.unLogin();
            this.$router.push({
                path: '/login',
            });
        }
        //我的订单
        public myOrder(){
            this.$router.push({
                path: '/myOrder',
            });
        }
        public goHome(){
            window.location.href="/";
        }
    }
</script>
<style lang="less">
    .headerMain{
        width: 100%;
        .header{
            width: 100%;
            height: 30px;
            min-width: 1000px;
            display: flex;
            line-height: 30px;
            background: #e3e4e5;
            border-bottom: solid 1px #ddd;
            .mainWidth{
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-left: 160px;
                margin-right: 160px;
                align-content: stretch;
                .headerFont{
                    margin-left: 20px;
                    color: #999;
                    cursor: pointer;
                    min-width: 60px;
                    font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
                }
                .rightArea{
                    margin-left: 20px;
                }
                .headerBody{
                    height: 108px;
                    width: 100%;
                    background-color: white;
                    display: flex;
                    align-items: center;
                }
            }
        }
        .headerBody{
            display: flex;
            justify-content: space-between;
            margin-left: 160px;
            background-color: ghostwhite;
            align-items: center;
            margin-right: 150px;
            border: solid 1px #ddd;
            margin-top: 15px;
            height: 100px;
            .logo{
                width: 150px;
                height: 60px;
                display: flex;
                align-items: center;
                margin-left: 10px;
            }
            .search{
                width: 450px;
                height: 30px;
                display: flex;
                align-items: center;
                input{
                    width: 400px;
                    height: 30px;
                    border: 2px solid #fa2a83;
                    outline: none;
                    border-top-left-radius: 2px;
                    border-bottom-left-radius: 2px;
                    background-color: #fff;
                }
                .searchButton{
                    background-image: url(//shop.vipstatic.com/img/common/header/sprites-hash-06206acd.png?78d4dd66);
                    background-position: -279px -97px;
                    width: 36px;
                    height: 36px;
                    display: inline-block;
                    background-color: #fa2a83;
                    cursor: pointer;
                }
            }

        }
    }

</style>
